<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="listQuery"
    >
      <el-form-item>
        <el-input v-model="listQuery.keyword" placeholder="关键词搜索" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getNodes">查询</el-button>
        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="openCreateDialog(0)">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      row-key="id"
      stripe
      :default-expand-all="true"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="节点名称" prop="name" fixed="left" width="200"></el-table-column>
      <el-table-column label="前端权限" prop="code" width="200"></el-table-column>
      <el-table-column label="授权接口" show-overflow-tooltip prop="route_json"></el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="{row}">
          <el-link @click="openCreateDialog(row.id)" :underline="false" type="primary" style="margin-right: 10px;">添加子节点</el-link>
          <el-link @click="openUpdateDialog(row)" :underline="false" type="primary" style="margin-right: 10px;">编辑</el-link>
          <el-link @click="deleteNode(row)" :underline="false" type="danger">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogTypeMap[dialogType]"
      :close-on-click-modal="false"
      :visible.sync="dialogIsShow"
      width="900px"
    >
      <el-form ref="nodeForm" :model="form" label-width="80px" :inline="true" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点名称" required>
              <el-input v-model.trim="form.name" placeholder="请输入按钮名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父级分类">
              <el-cascader
                v-model="form.pid"
                :options="list"
                :props="selectProps"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="权限标识" required>
              <el-input v-model.trim="form.code" placeholder="请输入权限标识"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="授权接口" required>
              <el-tag
                :key="tag"
                v-for="tag in form.routes"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                style="width: 260px "
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增授权接口</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogIsShow=false">返回</el-button>
        <el-button type="primary" @click="dialogType==='create'?create():update()">提交</el-button>
      </div>
    </el-dialog>

    <IconSelect @select-icon="setIcon" :iconDialogIsShow="iconDialogIsShow"></IconSelect>
  </div>
</template>

<script>
import elementIcons from '../../../components/IconSelect/element-icons'
import IconSelect from '@/components/IconSelect/IconSelect.vue'
import { Message, MessageBox } from 'element-ui'
import { getNodes, createNode, deleteNode, updateNode } from '@/api/system/node'
import {copyObj} from "codemirror/src/util/misc";
export default {
  name: 'SettingSystemNodeIndex',
  components: { IconSelect },
  data() {
    return {
      elementIcons,
      list: [],
      listLoading: false,
      listQuery: {
        keyword: ''
      },
      dialogType: 'create',
      dialogTypeMap: {
        create: '新增规则',
        update: '编辑规则'
      },
      dialogIsShow: false,
      dialogSubmitLoading: false,
      form: {
        id: 0,
        pid: 0,
        name: '',
        code: '',
        routes: []
      },
      inputVisible: false,
      inputValue: '',
      iconDialogIsShow: false,
      selectProps: {
        expandTrigger: 'click',
        multiple: false,
        emitPath: false,
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      }
    }
  },
  created() {
    this.getNodes()
  },
  methods: {
    getNodes() {
      this.listLoading = true
      getNodes().then((res) => {
        this.list = res.data
      }).catch(() => {})
      this.listLoading = false
    },
    resetForm() {
      this.form = {
        id: 0,
        pid: 0,
        name: '',
        code: '',
        routes: []
      }
    },
    openCreateDialog(pid = 0) {
      this.resetForm()
      this.form.pid = pid
      this.dialogIsShow = true
      this.dialogType = 'create'
    },
    openUpdateDialog(row) {
      this.dialogIsShow = true
      this.dialogType = 'update'
      this.form = copyObj(row, this.form)
    },
    create() {
      createNode(this.form).then((res) => {
        this.getNodes()
        Message.success(res.msg)
        this.dialogIsShow = false
      }).catch((res) => {})
    },
    update() {
      updateNode(this.form).then((res) => {
        this.getNodes()
        Message.success(res.msg)
        this.dialogIsShow = false
      }).catch((res) => {})
    },
    deleteNode(row) {
      MessageBox.confirm(`确定删除节点【${row.name}】吗？删除后无法恢复`, '温馨提示', {
        type: 'warning'
      }).then((res) => {
        deleteNode({ id: row.id }).then((res) => {
          this.getNodes()
          Message.success(res.msg)
        }).catch((res) => {})
      }).catch(() => {
        Message.info('已取消')
      })
    },
    setIcon(val) {
      this.form.icon = val.text
      this.iconDialogIsShow = false
      Message.success(val.text)
    },
    handleClose(tag) {
      this.form.routes.splice(this.form.routes.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        if (this.form.routes && this.form.routes.includes(inputValue)) {
          Message.error('权限接口重复：' + inputValue)
        } else {
          this.form.routes.push(inputValue)
        }
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 280px;
}
.el-cascader {
  width: 280px;
}
.el-select {
  width: 280px;
}
.el-textarea {
  width: 100%;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
